<template>
  <div id="LimitTop">
    <div class="ui attached segment">
      <div v-for="blog in page.list" class="ui vertical segment my-padded-large my-mobile-lr-clear">
        <div class="ui middle aligned mobile reversed stackable grid">
          <div class="eleven wide column">
            <h3 @click="gotoBlog(blog.id)" id="title" class="ui header my-cursor-pointer">{{blog.title}}</h3>
            <p @click="gotoBlog(blog.id)" class="my-text my-cursor-pointer">
              {{blog.description}}
            </p>
            <div class="ui stackable grid">
              <div class="row">
                <div class="twelve wide column">
                  <div class="ui link list horizontal">
                    <div class="item">
                      <img :src="blog.avatar" alt="" class="ui avatar image">
                      <div class="content">
                        <router-link tag="a" to="/about" class="header">{{blog.nickname}}</router-link>
                      </div>
                    </div>
                    <div class="item">
                      <i class="calendar alternate icon"></i>{{blog.createTime.split(" ")[0]}}
                    </div>
                    <div class="item">
                      <i class="icon eye"></i> {{blog.views}}
                    </div>
                    <div class="item">
                      <i class="icon comments"></i> {{blog.commentCount}}
                    </div>
                  </div>
                </div>
                <div class="right aligned four wide column" style="line-height: 34px!important;">
                  <a @click="gotoType(blog.typeId)" class="blue basic ui label my-padded-tiny my-text-thin">{{blog.type}}</a>
                </div>
              </div>
              <div class="row">
                <div class="column">
                  <a @click="gotoTag(blog.tagIds[index])" v-for="(tag, index) in blog.tags" class="ui label blue basic left pointing my-margin-tb-tiny my-padded-tiny">
                    {{tag}}
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div class="five wide column">
            <div class="my-position-published ui orange basic left pointing label my-padded-tiny" >
              {{blog.flag == 0 ? '原创' : blog.flag == 1 ? '转载' : blog.flag == 2 ? '翻译' : '其他'}}
            </div>
            <a @click="gotoBlog(blog.id)" class="my-cursor-pointer">
              <img :src="blog.firstPicture" alt="" class="ui rounded image">
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="ui bottom attached segment">
      <div class="ui middle aligned two column grid">
        <div class="column">
          <a @click="previousPage" :class="previousPageClass + ' ui blue basic button'">上一页</a>
        </div>
        <div class="right aligned column">
          <a @click="nextPage" :class="nextPageClass + ' ui blue basic button'">下一页</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "CommonLimitPage",
    props: {
      page: {
        type: Object,
        required: true
      },
    },
    data() {
      return {
        previousPageClass: "disabled",
        nextPageClass: "",
        users: this.$store.getters.AllUser,
        typeList: this.$store.getters.AllType,
        tagList: this.$store.getters.AllTag,
      }
    },
    updated() {
      this.$scrollTo('#Top', 10)
      if (!this.page.hasPreviousPage) {
        this.previousPageClass = 'disabled'
      } else {
        this.previousPageClass = ''
      }
      if (!this.page.hasNextPage) {
        this.nextPageClass = 'disabled'
      } else {
        this.nextPageClass = ''
      }
    },
    methods: {
      gotoBlog(blogId) {
        this.$router.push({name:'Blog',params:{blogId:blogId}})
      },
      gotoTag(tagId) {
        this.$router.push({name:'Tags',params:{tagId:tagId}})
      },
      gotoType(typeId) {
        this.$router.push({name:'Types',params:{typeId:typeId}})
      },
      // 上一页
      previousPage() {
        if (this.page.pageNum > 1) {
          this.$emit("getList", this.page.pageNum - 1)
          this.$scrollTo('#LimitTop')
        }
      },
      // 下一页
      nextPage() {
        if (this.page.pageNum < this.page.pages) {
          this.$emit("getList", this.page.pageNum + 1)
          this.$scrollTo('#LimitTop')
        }
      },
    }
  }
</script>

<style scoped>
  .my-position-published {
    position: absolute!important;
    right: 13px!important;
    top: -10px!important;
  }

  @media screen and (max-width: 768px) {
    #title {
      width: 325px;
    }

    .my-position-published {
      position: absolute!important;
      right: 10px!important;
      top: 240px!important;
    }
  }
</style>
